/*  
    两个没有解决的问题
    1.鼠标移动,球会加速
    2.球被吃后,并没有删除,而是移到了很远的地方 
*/

//获取画布
var cvs = document.querySelector('.canvas')
var ctx = cvs.getContext('2d')
//小球颜色
var colors = ["#228B22", "#FD5B78", "#88BFFF", "#FFA588", "#FF0880"];
//多少之间的随机数
function betweenRandom(min, max) {
    return Math.random() * (max - min) + min;
}

//画布占满整个页面
function resizeCanvas() {
    cvs.width = window.innerWidth;
    cvs.height = window.innerHeight;
}
resizeCanvas()
window.addEventListener("resize", resizeCanvas);

//获取鼠标坐标,给玩家用
var mouseX
var mouseY
window.addEventListener('mousemove', function (event) {
    mouseX = event.x;
    mouseY = event.y;
})
//玩家的半径
var or = 5;
//玩家的分数
var score = 0;
var scoreText = document.querySelector('.score')
window.onresize = function () {
    scoreText.innerHtml = score
}

// 小球对象
function Ball() {
    //半径,一起变大
    this.r = betweenRandom(or - 3, or + 5);
    //x坐标
    this.x = betweenRandom(0, cvs.width - this.r);
    //y坐标
    this.y = betweenRandom(0, cvs.height - this.r);
    //颜色
    this.ballColor = colors[Math.floor(betweenRandom(0, colors.length))];
    //速度
    this.speedX = betweenRandom(-2, 2);
    this.speedY = betweenRandom(-2, 2);

    // 绘制小球
    this.ballMove = function () {
        //绘制
        ctx.beginPath();
        ctx.fillStyle = this.ballColor;
        ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
        ctx.fill();
        //移动
        this.x += this.speedX;
        this.y += this.speedY;
        //反弹
        if (this.x - this.r < 0 || this.x + this.r > cvs.width) {
            this.speedX *= -1;
        } else if (this.y - this.r < 0 || this.y + this.r > cvs.height) {
            this.speedY *= -1;
        }


        //判断蹦到吃掉,加分,等等
        //整了半天删不掉只能把它扔远点了
        if (
            mouseX - this.x < or && mouseX - this.x > -or &&
            mouseY - this.y < or && mouseY - this.y > -or
        ) {
            if (or > this.r) {
                //增长0.3不然太快了
                or += this.r * 0.1;
                this.r = 0
                this.x = -10000
                this.y = -10000
                //分数
                scoreText.innerHTML = score
                score += 1;
                scoreText.innerHTML = score
                console.log(score);
            } else {
                score = 0
                or = 5
            }
        }
    };
}

//每秒 创建n个小球放进数组
var balls = [];
var num = 3;//小球数量
setInterval(() => {
    for (var i = 0; i < num; i++) {
        balls.push(new Ball());
    }
}, 1000);

// 创建定时器使小球运动
this.setInterval(function () {
    //清除运动轨迹,clearRect是把内容变透明,beginPath是重绘
    ctx.clearRect(0, 0, cvs.width, cvs.height);
    ctx.beginPath();
    //背景颜色
    ctx.fillStyle = "#eaeaea";
    ctx.fillRect(0, 0, cvs.width, cvs.height);
    //给小球加运动
    for (var i of balls) {
        i.ballMove();
    }
    //绘制玩家
    ctx.beginPath();
    ctx.arc(mouseX, mouseY, or, 0, Math.PI * 2);
    ctx.fillStyle = 'blue'
    ctx.fill()
    ctx.closePath();
}, 0.1);









